<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-12-26 18:13:35
-->
<template>
    <table class="table trans">
        <thead>
            <tr>
                <th class="index"></th>
                <th class="edit">操作</th>
                <th v-for="(item, index) in rrrrrrrrrrrrrrrrrr" :key="index">{{ item.label }}</th>
            </tr>
        </thead>
        <tbody>
            <slot></slot>
        </tbody>
    </table>
</template>

<script lang='ts' setup>
import { IAllObject } from '@/types/base';
import { computed, provide, reactive, ref, useSlots } from 'vue';
import { addColFun, IColumn } from './types';

const props = defineProps<{
    tableData: any[]
}>()

const sl = useSlots()
console.log(63526, sl.default);


// 表格列
const rrrrrrrrrrrrrrrrrr = reactive<IColumn[]>([])

// 获某列的值
const getColValue = (row: IAllObject, col: IColumn) => {
    return col.prop ? row[col.prop] : null
}

// 添加列的方法
const addColumn: addColFun = (columnProps: IColumn) => rrrrrrrrrrrrrrrrrr.push(columnProps)
const s = computed(() => props.tableData)
// 暴露方法
provide('tableData', s)


// 暴露方法
provide('addColumn', addColumn)

defineExpose({
    rrrrrrrrrrrrrrrrrr
})

</script>

<style scoped lang='scss'>
.table {
    @apply w-full bg-main-bg-color border-t border-main-border-color;
    tr {
        @apply w-full flex h-8 leading-8 text-13 text-sub-text-color transition-all duration-300;
    }
    th {
        @apply h-8 leading-8 font-normal whitespace-nowrap overflow-hidden overflow-ellipsis;
        color: $sub-text-color !important;
        font-size: 12px !important;
    }
    td {
        @apply text-common-text-color whitespace-nowrap overflow-hidden overflow-ellipsis;
        height: inherit;
    }
    .index {
        @apply text-sub-text-color text-11 text-center;
        flex: 1;
        max-width: 80px;
    }
    .edit {
        @apply text-sub-text-color text-11;
        flex: 1;
        max-width: 80px;
    }
    .title {
        color: $main-text-color;
        flex: 5;
        width: 120px;
    }
    .singer {
        color: $sub-text-color;
        flex: 2;
    }
    .album {
        color: $sub-text-color;
        flex: 3;
    }
    .time {
        color: $sub-text-color;
        flex: 1;
    }
    // 斑马纹
    .zebra {
        background-color: rgba($color: #666, $alpha: 0.05);
    }
}
</style>